<template>
    <el-row class="row-bg" :gutter="10" justify="space-around">
        <el-col :span="12">
            <el-calendar v-model="value" />
        </el-col>
        <el-col :span="12">
            <!--搜索框的设计-->
            <div class="container">
                <!--搜索框-->
                <div class="search">
                    <div class="search-item weatherWidth">
                        <input type="text" placeholder="请输入城市名" v-model="city">
                        <button class="iconfont icon-sousuo" @click="search"><el-icon>
                                <Search />
                            </el-icon></button>
                    </div>
                </div>
                <div class="weather weatherWidth">
                    <div class="weather-left">
                        <div>{{ city2 }}天气</div>
                        <div class="weather-summary">
                            <img :src="`/src/assets/images/${weather.icon}.svg`"  alt="">
                            <!--温度-->
                            <p>{{ weather.temp }} <span>℃</span></p>

                            <div class="weather-describe">
                                <!--天气状况的文字描述-->
                                <div class="weather-text">{{ weather.text }}</div>
                                <!--体感温度-->
                                <div class="waeather-feelslike">{{ weather.feelsLike }}°</div>
                            </div>
                        </div>

                    </div>
                    <!--天气详情-->
                    <div class="weather-right">
                    </div>
                </div>
                <el-row class="row-bg" justify="space-between">
                    <el-col :span="6">
                        <span class="item-title">风向 : </span>
                        <span class="item-content">{{ weather.windDir }}</span>
                    </el-col>
                    <el-col :span="6">
                        <span class="item-title">风力等级 : </span>
                        <span class="item-content">{{ weather.windScale }}</span>
                    </el-col>
                    <el-col :span="6">
                        <span class="item-title">相对湿度 : </span>
                        <span class="item-content">{{ weather.humidity  }}</span>
                    </el-col>
                </el-row>
               <el-row class="row-bg" justify="space-between" style="margin-top: 10px; padding-bottom: 20px;">
                        <el-col :span="8">
                            <span class="item-title">过去1小时降雨量 : </span>
                            <span class="item-content">{{ weather.precip  }}</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="item-title">大气压强 : </span>
                            <span class="item-content">{{ weather.pressure  }}</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="item-title">能见度 : </span>
                            <span class="item-content">{{ weather.vis  }}</span>
                        </el-col>
                    </el-row>
               
            </div>

        </el-col>

    </el-row>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
// import {WeatherApi} from '@/api'
import axios from 'axios';
// const Weatheropen = reactive({
//     location: '101010100',
//     key:'94f66cc8c6c04c1f8d9b66db1079d662'
// })

const value = ref(new Date())
const city = ref("郑州")
const city2 = ref("郑州")
const weather = ref<any>({})
const location=ref()
// const callWeather = () => { 
//     WeatherApi.selectWeather.call({
//         location: Weatheropen.location,
//         key:Weatheropen.key
//     }).then((res: any) => { 
//         console.log(res);

//     })
// }
const search = async () => {
    city2.value = city.value
    let localres = await axios.get("https://geoapi.qweather.com/v2/city/lookup", {
        params: {
            key: '94f66cc8c6c04c1f8d9b66db1079d662',
            location: city.value
        }
    })
    console.log(localres);
    location.value = localres.data.location[0].id
    console.log(location.value);
    

    let res = await axios.get("https://devapi.qweather.com/v7/weather/now", {
        params: {
            location: location.value,
            key: '94f66cc8c6c04c1f8d9b66db1079d662'
        }
    })
    console.log(res.data.now);
    weather.value = res.data.now
    console.log(weather.value.temp);


}

onMounted(() => {
    search()
})
</script>
<style scoped>
/* 搜索框 */
.container {
    color: rgb(80, 82, 84);
    background-color: rgb(208, 213, 216);

}

.weatherWidth {
    width: 1200px;
    margin: auto;
}

.search {
    background-color: rgb(210, 208, 208);
    padding: 10px 0;
}

.iconfont {
    font-weight: 700;
    color: rgb(252, 124, 44);
    margin-right: 15px;
    background: 0;
    border: 0;
    cursor: pointer;
    /*变小手*/
}

/* 搜索框的样式 */
.search-item {
    display: flex;
    border-radius: 200px;
    background-color: #fff;
    width: 400px;
    height: 46px;
    justify-content: space-between;
    align-items: center;
}

.search-item input {
    flex: 1 1 0;
    margin: 0 15px;
    line-height: 24px;
    border: 0;
}

.el-calendar {
    --el-calendar-cell-width: 43px !important;
}

/*今日天气*/
.weather {
    display: flex;
    /* 有两个盒子所以使用flex */
    justify-content: space-between;
    gap: 20px;
    /*间隔*/
    padding: 20px 0;
}

.weather-left {
    flex: 3;
    /**3个橡树 */
    background-color: rgba(170, 170, 170, 0.7);
    border-radius: 10px;
    padding: 10px 20px;
}


/**天气字体样式 */
.leabelweather {
    font-weight: 700;
    padding-bottom: 20px;
    line-height: 22px;
    white-space: nowrap;
    /* 不换行*/
}

.weather-summary {
    display: flex;
    gap: 5px;
}

.weather-summary img {
    width: 70px;
    height: 70px;
}

.weather-summary p {
    font-size: 28px;
    font-weight: 700;
    line-height: 28px;
}

/**空气质量 */
.weather-left {
    flex: 1;
    background-color: rgba(170, 170, 170, 0.7);
    border-radius: 10px;
    padding: 10px 20px;
}

/**温度 */
.weather-temp {
    font-size: 60px;
    line-height: 0px;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.ssd {
    height: 100%;
    font-size: 35px;
    margin-bottom: 12px;
}

.weather-describe {
    margin-left: 35px;
}

.weather-text {
    font-size: 20px;
    font-weight: 700;
    padding-left: 20px;
    line-height: 25px;
}

.weather-describe .waeather-feelslike {
    height: 22px;
    padding-top: 8px;
    color: antiquewhite;
    font-size: 17px;
    justify-content: flex-end;
}

</style>